Android：NineGridLayout |
您所在的位置：网站首页 › Android 本地数据库朋友圈 › Android：NineGridLayout |
Android：NineGridLayout
|
转载请注明出处：http://blog.csdn.net/hmyang314/article/details/51415396
NineGridLayout
一个仿微信朋友圈和QQ空间的九宫格图片展示自定义控件。 GitHub：https://github.com/HMY314/NineGridLayout
一、介绍 1、当只有1张图时，可以自己定制图片宽高，也可以使用默认九宫格的宽高； 2、当只有4张图时，以2*2的方式显示； 3、除以上两种情况下，都是按照3列方式显示，但这时有一些细节： a、如果只有9张图，当然是以3*3的方式显示； b、如果超过9张图，可以设置是否全部显示。 如果设置不完全显示，则按照3*3的方式显示，但是在第9张图上会有一个带“+”号的数字， 代表还有几张没有显示，这里是模仿了QQ空间图片超出9张的显示方式； 如果设置全部显示，理所当然的将所有图片都显示出来。 4、图片被按下时，会有一个变暗的效果，这也是模仿微信朋友圈的效果。 二、使用方法 1、核心类是NineGridLayout，继承自ViewGroup的抽象类，所以我们实际项目使用需要继承它，并要实现3个方法，如下： public abstract class NineGridLayout extends ViewGroup { //******************************其他代码省略************************** /** * 显示一张图片 * @param imageView * @param url * @param parentWidth 父控件宽度 * @return true 代表按照九宫格默认大小显示，false 代表按照自定义宽高显示 */ protected abstract boolean displayOneImage(RatioImageView imageView, String url, int parentWidth); protected abstract void displayImage(RatioImageView imageView, String url); /** * 点击图片时执行 */ protected abstract void onClickImage(int position, String url, List urlList); } 2、我这里用NineGridTestLayout继承NineGridLayout实现，displayOneImage()与displayImage()中的参数都是显示图片需要的，我这里用的是ImageLoader显示图片，当然你也可以用其他的。 public class NineGridTestLayout extends NineGridLayout { protected static final int MAX_W_H_RATIO = 3; public NineGridTestLayout(Context context) { super(context); } public NineGridTestLayout(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected boolean displayOneImage(final RatioImageView imageView, String url, final int parentWidth) { //这里是只显示一张图片的情况，显示图片的宽高可以根据实际图片大小自由定制，parentWidth 为该layout的宽度 ImageLoader.getInstance().displayImage(imageView, url, ImageLoaderUtil.getPhotoImageOption(), new ImageLoadingListener() { @Override public void onLoadingStarted(String imageUri, View view) { } @Override public void onLoadingFailed(String imageUri, View view, FailReason failReason) { } @Override public void onLoadingComplete(String imageUri, View view, Bitmap bitmap) { int w = bitmap.getWidth(); int h = bitmap.getHeight(); int newW; int newH; if (h > w * MAX_W_H_RATIO) {//h:w = 5:3 newW = parentWidth / 2; newH = newW * 5 / 3; } else if (h < w) {//h:w = 2:3 newW = parentWidth * 2 / 3; newH = newW * 2 / 3; } else {//newH:h = newW :w newW = parentWidth / 2; newH = h * newW / w; } setOneImageLayoutParams(imageView, newW, newH); } @Override public void onLoadingCancelled(String imageUri, View view) { } }); return false;// true 代表按照九宫格默认大小显示(此时不要调用setOneImageLayoutParams)；false 代表按照自定义宽高显示。 } @Override protected void displayImage(RatioImageView imageView, String url) { ImageLoaderUtil.getImageLoader(mContext).displayImage(url, imageView, ImageLoaderUtil.getPhotoImageOption()); } @Override protected void onClickImage(int i, String url, List urlList) { Toast.makeText(mContext, "点击了图片" + url, Toast.LENGTH_SHORT).show(); } } 3、在xml中实现
app:sapcing是设置九宫格中图片之间的间隔。 4、使用： public List urlList = new ArrayList();//图片url NineGridTestLayout layout = (NineGridTestLayout) view.findViewById(R.id.layout_nine_grid); layout.setIsShowAll(false); //当传入的图片数超过9张时，是否全部显示 layout.setSpacing(5); //动态设置图片之间的间隔 layout.setUrlList(urlList); //最后再设置图片url 三、核心类 NineGridLayout.java /** * 描述: * 作者：HMY * 时间：2016/5/10 */ public abstract class NineGridLayout extends ViewGroup { private static final float DEFUALT_SPACING = 3f; private static final int MAX_COUNT = 9; protected Context mContext; private float mSpacing = DEFUALT_SPACING; private int mColumns; private int mRows; private int mTotalWidth; private int mSingleWidth; private boolean mIsShowAll = false; private boolean mIsFirst = true; private List mUrlList = new ArrayList(); public NineGridLayout(Context context) { super(context); init(context); } public NineGridLayout(Context context, AttributeSet attrs) { super(context, attrs); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.NineGridLayout); mSpacing = typedArray.getDimension(R.styleable.NineGridLayout_sapcing, DEFUALT_SPACING); typedArray.recycle(); init(context); } private void init(Context context) { mContext = context; if (getListSize(mUrlList) == 0) { setVisibility(GONE); } } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onLayout(boolean changed, int left, int top, int right, int bottom) { mTotalWidth = right - left; mSingleWidth = (int) ((mTotalWidth - mSpacing * (3 - 1)) / 3); if (mIsFirst) { notifyDataSetChanged(); mIsFirst = false; } } /** * 设置间隔 * * @param spacing */ public void setSpacing(float spacing) { mSpacing = spacing; } /** * 设置是否显示所有图片（超过最大数时） * * @param isShowAll */ public void setIsShowAll(boolean isShowAll) { mIsShowAll = isShowAll; } public void setUrlList(List urlList) { if (getListSize(urlList) == 0) { setVisibility(GONE); return; } setVisibility(VISIBLE); mUrlList.clear(); mUrlList.addAll(urlList); if (!mIsFirst) { notifyDataSetChanged(); } } public void notifyDataSetChanged() { removeAllViews(); int size = getListSize(mUrlList); if (size > 0) { setVisibility(VISIBLE); } else { setVisibility(GONE); } if (size == 1) { String url = mUrlList.get(0); RatioImageView imageView = createImageView(0, url); //避免在ListView中一张图未加载成功时，布局高度受其他item影响 LayoutParams params = getLayoutParams(); params.height = mSingleWidth; setLayoutParams(params); imageView.layout(0, 0, mSingleWidth, mSingleWidth); boolean isShowDefualt = displayOneImage(imageView, url, mTotalWidth); if (isShowDefualt) { layoutImageView(imageView, 0, url, false); } else { addView(imageView); } return; } generateChildrenLayout(size); layoutParams(); for (int i = 0; i < size; i++) { String url = mUrlList.get(i); RatioImageView imageView; if (!mIsShowAll) { if (i < MAX_COUNT - 1) { imageView = createImageView(i, url); layoutImageView(imageView, i, url, false); } else { //第9张时 if (size 0) { float textSize = 30; final TextView textView = new TextView(mContext); textView.setText("+" + String.valueOf(overCount)); textView.setTextColor(Color.WHITE); textView.setPadding(0, singleHeight / 2 - getFontHeight(textSize), 0, 0); textView.setTextSize(textSize); textView.setGravity(Gravity.CENTER); textView.setBackgroundColor(Color.BLACK); textView.getBackground().setAlpha(120); textView.layout(left, top, right, bottom); addView(textView); } } displayImage(imageView, url); } private int[] findPosition(int childNum) { int[] position = new int[2]; for (int i = 0; i < mRows; i++) { for (int j = 0; j < mColumns; j++) { if ((i * mColumns + j) == childNum) { position[0] = i;//行 position[1] = j;//列 break; } } } return position; } /** * 根据图片个数确定行列数量 * * @param length */ private void generateChildrenLayout(int length) { if (length |
【本文地址】
今日新闻 |
推荐新闻 |